<template>
  <el-menu :collapse="isCollapse" :collapse-transition="false" class="el-menu-vertical-demo" background-color="#000000"
    text-color="#ffffff" router="true">
    <el-sub-menu v-for="fatherMenu in menuData" :key="fatherMenu.menuid" :index="fatherMenu.menuid">
      <template #title>
        <el-icon>
          <component :is="fatherMenu.icon" class="icon"></component>
        </el-icon>
        <span>{{ fatherMenu.menuname }}</span>
      </template>
      <el-menu-item v-for="childrenMenu in fatherMenu.menus" :key="childrenMenu.menuid"
        :index="childrenMenu.url"><template #title>
          <el-icon>
            <component :is="childrenMenu.icon" class="icon"></component>
          </el-icon>
          <span>{{ childrenMenu.menuname }}</span>
        </template></el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import bus from "../untils/bus";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const isCollapse: any = ref(false);
onMounted(() => {
  bus.on("isCollapse", (val) => {
    isCollapse.value = val;
    console.log("val", typeof val);
  });
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let menuData: Array<any> = [
  {
    menuid: "1",
    icon: "Document",
    menuname: "系统管理",
    hasThird: null,
    url: null,
    menus: [
      {
        menuid: "122",
        icon: "ShoppingCart",
        menuname: "通知公告",
        hasThird: "N",
        url: "/systemManagement/NotificationAnnouncement",
        menus: null,
      },
    ],
  },
  {
    menuid: "33",
    icon: "Tickets",
    menuname: "订单管理",
    hasThird: null,
    url: null,
    menus: [
      {
        menuid: 34,
        icon: "Fries",
        menuname: "交易订单",
        hasThird: "N",
        url: "pay/PayOrder",
        menus: null,
      },
    ],
  },
  {
    menuid: "71",
    icon: "Setting",
    menuname: "基础数据管理",
    hasThird: null,
    url: null,
    menus: [
      {
        menuid: 72,
        icon: "User",
        menuname: "工序维护",
        hasThird: "N",
        url: "/basicDataManagement/ProcessMaintenance",
        menus: null,
      },
      {
        menuid: 174,
        icon: "Menu",
        menuname: "英雄维护",
        hasThird: "N",
        url: "/systemManagement/HeroMaintenance",
        menus: null,
      },
      {
        menuid: 73,
        icon: "Avatar",
        menuname: "人员维护",
        hasThird: "N",
        url: "/systemManagement/PersonnelMaintenance",
        menus: null,
      },
      {
        menuid: 74,
        icon: "Guide",
        menuname: "公司管理",
        hasThird: "N",
        url: "system/SystemDept",
        menus: null,
      },
      {
        menuid: 75,
        icon: "Tools",
        menuname: "系统环境变量",
        hasThird: "N",
        url: "system/SystemVarible",
        menus: null,
      },
      {
        menuid: 76,
        icon: "Promotion",
        menuname: "权限管理",
        hasThird: "N",
        url: "system/SystemPermission",
        menus: null,
      },
    ],
  },
  {
    menuid: "128",
    icon: "Ticket",
    menuname: "控件测试",
    hasThird: null,
    url: null,
    menus: [
      {
        menuid: 129,
        icon: "HotWater",
        menuname: "树控件",
        hasThird: "N",
        url: "/controlTesting/TreeControl",
        menus: null,
      },
      {
        menuid: 175,
        icon: "Goblet",
        menuname: "视频播放器",
        hasThird: "N",
        url: "/controlTesting/VideoPlayerControl",
        menus: null,
      },
      {
        menuid: 176,
        icon: "Goblet",
        menuname: "富文本",
        hasThird: "N",
        url: "/controlTesting/RichTextControl",
        menus: null,
      },
      {
        menuid: 177,
        icon: "Goblet",
        menuname: "Tabs",
        hasThird: "N",
        url: "/controlTesting/TabsControl",
        menus: null,
      },
    ],
  },
  {
    menuid: "150",
    icon: "Paperclip",
    menuname: "图表",
    hasThird: null,
    url: null,
    menus: [
      {
        menuid: 159,
        icon: "Trophy",
        menuname: "数据可视化",
        hasThird: "N",
        url: "/HomePage/ChartStatistics",
        menus: null,
      },
    ],
  },
  {
    menuid: "914",
    icon: "Stopwatch",
    menuname: "练习",
    hasThird: null,
    url: null,
    menus: [
      {
        menuid: 188,
        icon: "Scissor",
        menuname: "toDoList",
        hasThird: "N",
        url: "/Practice/MyToDoList",
        menus: null,
      },
      {
        menuid: 198,
        icon: "Ship",
        menuname: "练习入门父亲",
        hasThird: "N",
        url: "/HomePage/PracticeIntroductionFather",
        menus: null,
      },
      {
        menuid: 199,
        icon: "PartlyCloudy",
        menuname: "练习基础",
        hasThird: "N",
        url: "/HomePage/PracticeBase",
        menus: null,
      },{
        menuid: 200,
        icon: "PartlyCloudy",
        menuname: "表格滚动动画",
        hasThird: "N",
        url: "/Practice/ScrollingTable",
        menus: null,
      },
    ],
  },
];
</script>
<style scoped>

.el-menu-vertical-demo:not(.el-menu--collapse) {
  height: 90%;
  min-height: 100vh;
}

.el-menu--collapse {
  min-height: 100vh;
}
</style>
